<template lang="pug">
div(v-if="$route.path === '/childCare/growthObserve/growingStory'")
      el-row(:gutter="20")
        el-col(:span="6" v-for="(item, index) in [1, 2, 2,2,2,3,3,3]" :key="index")
         .story-list.mb20
           .list-c
             .list-img
               AImage(:url="storyObj.url" :preview="false")
             .list-t
              .line-one 苗苗音乐漫天小星星苗苗音乐漫天小星星
              .list-status.mt10
                span 代办：0
                span 已办： 0
              .list-btn.flex.mt10.justify-sb
               el-button(type="primary" icon="el-icon-check" size="mini" @click="checkModel") 查看版型
               el-button(type="primary" icon="el-icon-edit" size="mini" @click="changeModel") 套入版型
      .tr
        i-pagination(
            v-bind="pagination"
            activeClass="active"
            @pagination="values => getList({ ...values, ...filterData })"
          )
      addStudent(:visible.sync="chcekObj.visible" title="发布对象" btnName="套入" v-if="chcekObj.visible"  :studentArr="chcekObj.studentArr" @save="saveTag")
      CheckStory(:visible.sync="chcekObj.visibleS"   :storyArr="storyArr" )
      TaoDrawer(:visible.sync="chcekObj.visibleT" :studentArr.sync="studentArr")
router-view(v-else)
</template>
<script>
// import { mapGetters } from 'vuex'
import AImage from '@/components/Basic/Image'
import addStudent from '@/components/Basic/addStudent'
import IPagination from '@/components/Basic/Pagination'
import CheckStory from './components/CheckStory'
import TaoDrawer from './components/TaoDrawer'

export default {
  components: {
    IPagination,
    AImage,
    addStudent,
    CheckStory,
    TaoDrawer
  },
  data () {
    return {
      storyObj: {
        url: 'https://saas.res.dotflat.cn/teach/file/system/2022-01/2022-01-09_19-22-55-588.jpg'
      },
      pagination: {
        pageNum: 1,
        pageSize: 4,
        total: 1
      },
      chcekObj: {
        studentArr: ['詹三', '李淑', '曹仁', '李三', '曹五', '李三2', '曹五2', '李三3', '曹五3'],
        visible: false,
        visibleS: false,
        visibleT: false
      },
      storyArr: [
        { url: 'https://saas.res.dotflat.cn/teach/file/system/2022-01/2022-01-16_21-21-12-406.png' },
        { url: 'https://saas.res.dotflat.cn/teach/file/system/2022-01/2022-01-15_14-33-17-751.jpeg' },
        { url: 'https://saas.res.dotflat.cn/teach/file/system/2022-01/2022-01-16_21-21-12-406.png' }
      ],
      studentArr: [] // 套入模板选择的对象

    }
  },
  computed: {
  },
  watch: {
  },
  created () {
    // https://saas.res.dotflat.cn/teach/file/system/2022-01/2022-01-16_10-56-54-307.jfif
    // https://saas.res.dotflat.cn/teach/file/system/2022-01/2022-01-16_10-57-01-097.webp
  },
  methods: {
    // 查看版型
    checkModel () {
      this.chcekObj.visibleS = true
    },
    saveTag (tag) {
      this.studentArr = tag
      this.chcekObj.visibleT = true
    },
    // 套入版型
    changeModel () {
      this.chcekObj.visible = true
    }
  }
}
</script>
<style lang="scss" scoped>
.story-list {
  .list-t {
    padding: 10px;
    font-weight: bold;

  .list-btn {
   ::v-deep .el-button--primary {
      background-color: #AACD22;
      border-color: #AACD22
    }
   }
   .list-status {
     font-size: 14px;
     font-weight: normal;
     display: flex;
     justify-content: space-between;
   }
  }
}
</style>
